<template>
  <div class="home-footer">
    <div class="footer-left">
      <el-avatar class="footer-music-img" shape="square" size="large" :src="musicAvater"></el-avatar>
      <div class="music-info">
        <div><span class="music-name">你的酒馆对我打了洋</span><span class="music-author">-陈雪玲</span></div>
        <div class="music-time">00：25/04：11</div>
      </div>
    </div>
    <div class="footer-middle">
      <div class="prev">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="play-icon">
        <i :class=" playState? 'el-icon-video-pause':'el-icon-video-play'"></i>
      </div>
      <div class="next">
        <i class="el-icon-arrow-right"></i>
      </div>

    </div>

    <div class="footer-right">
      <div class="share">
        <i class="el-icon-share"></i>
      </div>
      <el-popover placement="bottom" width="50px" trigger="hover">
        <div>
          <span>顺序播放</span>
        </div>
        <div slot="reference" class="order">
          <i class="el-icon-s-unfold"></i>
        </div>
      </el-popover>

      <div class="playlist">
        <i class="el-icon-s-operation"></i>
      </div>
      <div class="volume-close">
        <i class="el-icon-bell"></i>
      </div>
      <div class="volume">
        <el-slider class="volume-slider" v-model="volumeNum"></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homeFooter',
  data () {
    return {
      musicAvater: '../assets/logo.png',
      playState: false,
      volumeNum: 0

    }
  }
}
</script>

<style lang='less' scoped>
.home-footer {
  padding: 0 0.175695rem;
  color: #4a4a4a;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .footer-left {
    height: 100%;
    padding: 0.036603rem;
    display: flex;
    align-items: center;
    .footer-music-img {
      width: 0.292826rem;
      height: 0.292826rem;
    }
    .music-info {
      height: 0.292826rem;
      margin-left: 0.10981rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .music-name {
        font-size: 0.102489rem;
      }
      .music-author,
      .music-time {
        font-size: 0.087848rem;
      }
    }
  }
  .footer-middle {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    .prev,
    .next {
      width: 0.183016rem;
      height: 0.183016rem;
      line-height: 0.183016rem;
      font-size: 0.102489rem;
      border: 1px solid rgb(160, 160, 160);
      border-radius: 50%;
      cursor: pointer;
      &:hover {
        background-color: aliceblue;
      }
    }
    .play-icon {
      margin: 0 0.11713rem;
      width: 0.329429rem;
      height: 0.329429rem;
      line-height: 0.329429rem;
      border-radius: 50%;
      font-size: 0.219619rem;
      background-color: red;
      color: #fff;
      cursor: pointer;
      &:hover {
        background-color: rgb(252, 86, 86);
      }
    }
  }
  .footer-right {
    height: 100%;
    margin: 0.058565rem;
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 0.183016rem;

    > * {
      margin-left: 0.10981rem;
    }
    .share,
    .order,
    .playlist,
    .volume-close {
      width: 0.183016rem;
      height: 0.183016rem;
      font-size: 0.146413rem;
      cursor: pointer;
      &:hover {
        color: rgb(110, 110, 110);
      }
    }

    .volume-slider {
      width: 0.732064rem;
      margin-left: 0.04981rem;
      /deep/ .el-slider__bar {
        height: 0.036603rem;
        background-color: #4a4a4a;
      }
      /deep/ .el-slider__button {
        width: 0.087848rem;
        height: 0.087848rem;
        border: 2px solid #4a4a4a;
      }
    }
  }
}
</style>
